<template>
	<div class="public-header">
		<div class="navbar">
			<div class="nav">
				<div class="nav-left">
					<router-link to="/">首页</router-link>
					<router-link to="/a">二手房</router-link>
					<router-link to="/b">新房</router-link>
					<router-link to="/list">租房</router-link>
					<router-link to="/c">商业办公</router-link>
					<router-link to="/d">小区</router-link>
					<router-link to="/e">问答</router-link>
					<router-link to="/f">工具</router-link>
					<router-link to="/publish">发布房源</router-link>
				</div>
				<div class="nav-right">
					<div v-show="!phone">
						<a href=""><img src="../assets/user_icon.png" alt=""></a>
						<router-link to="/login">登录</router-link>
						<span>
						/
						</span>
						<router-link to="/register" style="margin-right: 20px;">注册</router-link>
						<span>热线电话1010-9666</span>
					</div>
					<div v-show="phone">
						<a href=""><img src="../assets/user_icon.png" alt=""></a>
						<router-link to="/percenter">{{phone}}</router-link>
						<span>
						/
						</span>
						<router-link to="/register" style="margin-right: 20px;" @click="updatePhone('')">退出</router-link>
						<span>热线电话1010-9666</span>
					</div>
				</div>
			</div>
		</div>
		<div class="header">
			<div class="headerone">
				<router-link to="/yezhu" class="logo"></router-link>
				<router-link to="/yezhu/maifang/" class="active">我要卖房</router-link>
				<router-link to="/rent" >委托出租</router-link>
				<span><img src="">下载链家APP</span>
			</div>
			<div class="headertwo">
				<p style="font-weight: bold;color: #333;font-size: 33px;">发布出售房源</p>
				<p style="margin-top: 15px;
				color: #878787;
				font-size: 16px;">8000+全国链家门店·10万+全国经纪人·链家倾情服务15年+</p>
			</div>
		</div>
	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
	computed:{
		...mapState(["phone"]),
	},
	methods: {
		...mapMutations(["updatePhone"]),
	},
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.navbar {
  background-color: #333;
  height: 50px;
  width: 100vw;
  color: #a9abab;
}
.navbar .nav {
  width: 1150px;
  margin: 0 auto;
}
.navbar .nav .nav-left {
  float: left;
}
.navbar .nav .nav-left a {
  text-decoration: none;
  line-height: 50px;
	margin-right: 1.5rem;
  color: #a9abab;
}
.navbar .nav .nav-left a:hover {
  color: #fff;
  cursor: pointer;
}
.navbar .nav .nav-right {
  color: #fff;
  float: right;
	height: 50px;
}
.navbar .nav .nav-right>div{
	line-height: 50px;
	display: flex;
}
.navbar .nav .nav-right>div>a>img{
	width: 15px;
	height: 15px;
	margin-top: 18px;
	margin-right: 5px;
}
.navbar .nav .nav-right a {
  color: #fff;
	text-decoration: none;
}
.header {
  width: 100%;
  background-color: #f5f5f6;
  margin: 0 auto;
}
.header a {
  text-decoration: none;
  margin-right: 32px;
  line-height: 32px;
  color: #000;
}
.header a.active {
  color: #00ac65;
}
.header a:hover {
  cursor: pointer;
}
.headerone {
  width: 1150px;
  height: 32px;
  padding: 30px 0 25px 0;
  margin: 0 auto;
}
.header .logo {
  background-image: url(../assets/img/sprite.png);
  background-position: 0 -373px;
  width: 120px;
  height: 32px;
  float: left;
}
.headerone a {
  font-size: 1.3rem;
}
.headerone span {
  float: right;
  line-height: 32px;
	font-size: 1.3rem;
}
.headerone span img {
  background-image: url(../assets/img/sprite.png);
  background-position: -452px -112px;
  width: 14px;
  height: 18px;
  float: left;
  margin-right: 10px;
  margin-top: 7px;
}
.headertwo {
	margin-top: 15px;
  padding-bottom: 50px;
  text-align: center;
}
.headertwo h4 {
  margin-top: 15px;
}
</style>